<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* width: 5rem; */
            width: 100px;
            height: 2000px;
            background: red;
        }
    </style>
    <script>

    </script>
</head>

<body>
    <div class="box">111</div>
    <button>点击我设置scroll</button>
    <script>
        // 一、onload 事件  ：浏览器dom和资源加载完毕的时候会自动执行onload事件；
        // window.onload = function(){
        //     console.log("dom结构和资源加载完毕");
        // }
        // 用处 ：获取dom结构 ：前提是浏览器已经加载好了dom结构才能获取到dom结构；

        // window.onload = function () {
        //     var boxEle = document.getElementsByClassName("box")[0];
        //     console.log(boxEle);

        //     boxEle.onclick = function () {
        //         boxEle.innerHTML = "2222";
        //     }
        // }

        // 二、onresize事件 ：浏览器窗口大小发生改变的时候会自动触发 onresize事件；
        // 假定 浏览器宽度无论在任意尺寸下都是10rem， rem是根字体的大小； 动态的改变根字体的大小；
        // window.onresize = function(){
        //     // console.log("浏览器发生了改变");
        //     // 1.获取浏览器的宽度 ？
        //     var w = window.innerWidth;
        //     // console.log(w);
        //     // 获取html标签的简写；
        //     document.documentElement.style.fontSize = w/10 + "px";
        // }


        // 三、onscroll事件 ：滚动条滚动的时候触发；
        window.onscroll = function () {
            console.log("滚了");
            // 获取卷去的高度 ；1.存在兼容 有没有文档声明 ，如果有声明 document.documentElement.scrollTop
            // 没有文档声明 document.body.scrollTop 
            // 2. 可以获取 且可以设置 卷去的高度；
            console.log(document.documentElement.scrollTop);
            console.log(document.body.scrollTop);
        }


        document.getElementsByTagName("button")[0].onclick = function () {
            document.documentElement.scrollTop = 10;
        }

        // 作业 ：1.复习 2. 吸顶效果 回到顶部； 3.下拉菜单

        /* 
            页面上的流氓广告功能

            - 页面打开在左下角有一个广告框
            - 点击关闭的时候可以关闭
            - 关闭一定时间以后自动还弹出来

        
        
        
         */
    </script>
</body>

</html>